<!-- 拖拽滑动 -->
<template>
  <div class="IncludedBgbig" :class="{'hide':isHide}" @click="goPage">
    <img src="../../assets/three/interests.png" alt />
    <span>{{title}}</span>
  </div>
</template>

<script>
export default {
  name: 'defaultDrag',
  props: ['search', 'title', 'active', 'clickFn'],
  data() {
    return {
      isHide: false,
      timer: null
    };
  },

  components: {},

  computed: {},
  mounted() {
    window.addEventListener('scroll', this.scrollFn, false);
  },
  methods: {
    scrollFn() {
      this.isHide = true;
      clearInterval(this.timer);
      this.timer = null;
      this.timer = setInterval(() => {
        this.isHide = false;
      }, 600);
    },
    goPage() {
      if (this.clickFn) {
        this.clickFn();
        return;
      }
      let vLevel;
      if (this.active == 0) {
        vLevel = 0;
      } else if (this.active == 1) {
        vLevel = 4;
      } else if (this.active == 2) {
        vLevel = 5;
      } else if (this.active == 3) {
        vLevel = 1;
      } else if (this.active == 4) {
        vLevel = 2;
      }
      let that = this;
      this.$router.push({
        path: '/buyVip',
        query: { vLevel: vLevel }
      });
    }
  },
  destroyed() {
    window.removeEventListener('scroll', this.scrollFn);
  }
};
</script>
<style scoped lang="less">
// 实时大屏
.IncludedBgbig {
  position: fixed;
  top: 430px;
  right: 0;
  z-index: 19 !important;
  border-radius: 0.4267rem 0rem 0rem 0.4267rem;
  background-color: #ee7e2f;
  padding: 0 0.2933rem;
  // width: 2.696667rem;
  box-sizing: border-box;
  line-height: 0.853333rem;
  font-size: 0.373333rem;
  color: #fff;
  transition: all linear 300ms;
  display: flex;
  &.hide {
    right: -1.8rem;
  }
  img {
    width: 0.453333rem;
    height: 0.346667rem;
    align-self: center;
    margin-right: 0.233333rem;
  }
}
</style>